<template>
  <div>
    <h1>记事本-录入</h1>
    <div class="box">
      <ul>
        <li v-for="item in dataList" :key="item.id">
          <el-checkbox v-model="item.checked" />
          {{ item.text }}
        </li>
      </ul>
      <el-button type="primary" round @click="addOne">新增一条</el-button>
      <el-button type="danger" round @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
import { nanoid } from 'nanoid';
import { mapActions } from 'vuex';

export default {
  name: 'NotepadEnter',
  data() {
    return {
      dataList: [{ id: nanoid(), checked: true, text: '这是你的第一条数据' }],
    };
  },
  computed: {
    // ...mapState(['saveNotePad']),
  },
  methods: {
    // 新增
    addOne() {
      this.dataList.push({ text: '111111' });
    },
    save() {
      // 简易或正常文件
      // this.$store.commit('saveNotePad', this.dataList);
      // this.$store.dispatch('saveNotePad', this.dataList);

      // 模块化
      this.$store.commit('test/saveNotePad', this.dataList);
      // this.$store.dispatch('test/saveNotePad', this.dataList);
      console.log('保存之后的数据', this.$store);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 50vw;
  margin: 0px auto;
  ul > li {
    list-style: none;
    text-align: left;
  }
}
</style>
